<template>
  <ElForm
    ref="dataForm"
    :model="dataForm"
    :disabled="true"
    :rules="dataRule"
    label-width="110px"
    @keyup.enter.native="dataFormSubmit()">
    <ElRow>
      <ElFormItem label="问题单号" prop="problemInforNum">
        <ElInput v-model="dataForm.problemInforNum" disabled placeholder="问题单号" />
      </ElFormItem>
    </ElRow>
    <ElRow>
      <ElFormItem label="整改措施" prop="describeText">
        <ElInput
          v-model="dataForm.describeText"
          type="textarea"
          :rows="4"
          :disabled="disabledView"
          placeholder="整改措施" />
      </ElFormItem>
    </ElRow>
    <ElRow>
      <!--责任人-->
      <ElFormItem label="责任人" prop="describeText">
        <RectifyDetailTable
          ref="rectifyDetailTable"
          :concurent-type="type"
          :rectify-id="dataForm.id"
          :rectify-num="dataForm.number" />
      </ElFormItem>
    </ElRow>
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label="职能部门名称" prop="functionalName">
          <VueTreeSelect
            v-model="dataForm.functionalOuid"
            :disabled="disabledView"
            :options="functionDeptOption"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择职能部门"
            @select="functionNameSelect" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label="完成情况" prop="completion">
          <ElSelect v-model="dataForm.completion" :disabled="disabledView" placeholder="请填写完成情况">
            <ElOption v-for="item in completionOptions" :key="item.value" :label="item.label" :value="item.value" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label="完成时限" prop="timelimitType">
          <ElSelect
            v-model="dataForm.timelimitType"
            :disabled="disabledView"
            placeholder="完成时限"
            @change="timelimitTypeChange()">
            <ElOption v-for="item in timelimitTypeOption" :key="item.value" :label="item.label" :value="item.value" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow v-if="dataForm.timelimitType === '1' || timelimitTypeExist">
      <ElCol :span="12">
        <ElFormItem label="开始时间" prop="startdate">
          <ElDatePicker
            v-model="dataForm.startdate"
            :disabled="disabledView"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择开始时间" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="12">
        <ElFormItem label="规定完成日期" prop="enddate">
          <ElDatePicker
            v-model="dataForm.enddate"
            :disabled="disabledView"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择规定完成日期" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElFormItem label="整改进展" prop="rectifiProgress">
        <ElInput
          v-model="dataForm.rectifiProgress"
          type="textarea"
          :rows="4"
          :disabled="disabledView"
          placeholder="整改进展" />
      </ElFormItem>
    </ElRow>
    <ElRow>
      <ElCol :span="12">
        <ElFormItem label="完成进度" prop="completionBfb">
          <ElInputNumber
            v-model="dataForm.completionBfb"
            controls-position="right"
            :disabled="disabledView"
            placeholder="完成进度" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="12">
        <ElFormItem label="实际完成时间" prop="completionDate">
          <ElDatePicker
            v-model="dataForm.completionDate"
            :disabled="disabledView"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择实际完成时间" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElFormItem label="备注" prop="remarks">
        <ElInput v-model="dataForm.remarks" type="textarea" :rows="4" :disabled="disabledView" placeholder="备注" />
      </ElFormItem>
    </ElRow>
    <ElRow>
      <!--        附件信息-->
      <ElFormItem label="附件信息">
        <UploadPage
          ref="uploadPage"
          :unique-code="dataForm.unid"
          :upload-permissions="permissionList"
          model="problem"
          classify="rectify" />
      </ElFormItem>
    </ElRow>
  </ElForm>
</template>

<script>
  import { getObj, addObj, putObj } from '@/api/problem/rectify'
  import { mapState } from 'vuex'
  import RectifyDetailTable from './RectifyDetailTable'
  import { fetchTree } from '@/api/admin/dept'

  export default {
    name: 'RectifyForm',
    components: {
      RectifyDetailTable
    },
    data() {
      return {
        visible: false,
        canSubmit: false,
        dataForm: {
          id: 0,
          unid: '',
          createId: '',
          createBy: '',
          createTime: '',
          deptId: '',
          deptFullname: '',
          updateBy: '',
          updateTime: '',
          tenantId: '',
          delFlag: '',
          number: '',
          functionalOuid: '',
          functionalName: '',
          functionalFullname: '',
          problemInforId: '',
          problemInforNum: '',
          describeText: '',
          timelimitType: '',
          startdate: '',
          enddate: '',
          rectifiProgress: '',
          completionBfb: '',
          emergency: '',
          completionDate: '',
          remarks: '',
          completion: ''
        },
        dataRule: {
          number: [
            {
              required: true,
              message: '整改唯一编码不能为空',
              trigger: 'blur'
            }
          ],
          functionalName: [
            {
              required: true,
              message: '职能部门名称不能为空',
              trigger: 'blur'
            }
          ],
          timelimitType: [
            {
              required: true,
              message: '完成时限',
              trigger: 'blur'
            }
          ],
          emergency: [
            {
              required: true,
              message: '紧急程度不能为空',
              trigger: 'blur'
            }
          ]
        },
        disabledView: false,
        // title: '查看',
        type: 'view',
        functionDeptOption: [],
        timelimitTypeOption: [
          {
            label: '长期',
            value: '0'
          },
          {
            label: '限期',
            value: '1'
          },
          {
            label: '立行立改',
            value: '2'
          }
        ],
        completionOptions: [
          {
            label: '未完成',
            value: '0'
          },
          {
            label: '已整改',
            value: '1'
          },
          {
            label: '进行中',
            value: '2'
          },
          {
            label: '长期坚持',
            value: '3'
          },
          {
            label: '需回头看',
            value: '4'
          }
        ],
        timelimitTypeExist: false
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          downloadBtn: this.$isEmpty(this.permissions.problem_rectify_download, false),
          feedback_rectify_add: this.$isEmpty(this.permissions.feedback_rectify_add, false)
        }
      }
    },
    methods: {
      initData(dataForm) {
        this.disabledView = true
        this.visible = true
        this.dataForm = dataForm
        // 加载责任人数据
        this.$nextTick(() => {
          this.$refs.rectifyDetailTable.loadResponsiPepople(dataForm.id, dataForm.number)
        })
        // 加载部门数据
        this.getdeptTreeSelect()
      },
      init(id) {
        if (this.permissionList.feedback_rectify_add) {
          this.disabledView = false
          this.type = 'edit'
        } else {
          this.disabledView = true
          this.type = 'view'
        }
        // 加载责任人数据
        this.$nextTick(() => {
          this.$refs.rectifyDetailTable.addResponsiPepople()
        })
        this.dataForm.id = id
        this.visible = true
        this.canSubmit = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
          this.$refs.uploadPage.refreshChange()
        })
        // 加载部门数据
        this.getdeptTreeSelect()
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.canSubmit = false
            if (this.dataForm.id) {
              putObj(this.dataForm)
                .then(data => {
                  this.$notify.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                })
                .catch(() => {
                  this.canSubmit = true
                })
            } else {
              addObj(this.dataForm)
                .then(data => {
                  this.$notify.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                })
                .catch(() => {
                  this.canSubmit = true
                })
            }
          }
        })
      },
      // 选择职能部门
      functionNameSelect(node, instanceId) {
        this.dataForm.functionalOuid = node.id
        this.dataForm.functionalName = node.name
      },
      /** 查询菜单下拉树结构 */
      getdeptTreeSelect() {
        fetchTree().then(response => {
          this.functionDeptOption = response.data.data
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      timelimitTypeChange() {
        if (this.dataForm.timelimitType === '0' || this.dataForm.timelimitType === '2') {
          this.timelimitTypeExist = false
          this.dataForm.startdate = ''
          this.dataForm.enddate = ''
        } else if (this.dataForm.timelimitType === '1') {
          this.timelimitTypeExist = true
        }
      }
    }
  }
</script>
